<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css"
	href="${request.contextPath}/js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${request.contextPath}/js/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${request.contextPath}/easyui/demo/demo1.css">
<!-- ztree -->
<link rel="stylesheet" type="text/css"
	href="${request.contextPath}/js/ztree/css/demo.css">
<link href="${request.contextPath}/js/ztree/css/demo.css"
	rel="stylesheet" />
<link rel="stylesheet"
	href="${request.contextPath}/js/ztree/zTreeStyle/zTreeStyle.css"
	type="text/css">
<!-- 鼠标绘制管理类样式,实现鼠标绘制管理的入口 -->
<link rel="stylesheet"
	href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript"
	src="${request.contextPath}/map/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=1.3&key=fNltnrt8GrS5fYuirz0uGIXgznCyZml9"></script>
<!-- 区域范围判断类引用 电子围栏-->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<!-- 鼠标绘制管理类,实现鼠标绘制管理的入口 -->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<!-- 百度路书引用 -->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<!-- 百度测距工具类引用-->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<!-- 百度测距工具类引用-->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript"
	src="${request.contextPath}/js/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="${request.contextPath}/js/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript"
	src="${request.contextPath}/js/jquery.easyui.min.1.2.2.js"></script>
<script src="${request.contextPath}/js/vue/vue.min.js" charset="utf-8"></script>
<script src="${request.contextPath}/js/jquery.qrcode.min.js"></script>
</head>
<body>
	<div style="width: 1485px; height: 800px; border: 1px solid gray">
		<div style="width: 1485px; height: 560px; border: 1px solid gray"
			id="container"></div>
		<table class="easyui-datagrid" title=""
			style="width: 1485px; height: 25px">
		</table>
		<div
			style="width: 1485px; height: 225px; border: 1px solid gray; overflow: auto;">
			<table border="2px" id="cont">
				<tr>
					<td v-bind:style="styles">日期</td>
					<td v-bind:style="styles">经度</td>
					<td v-bind:style="styles">纬度</td>
					<td v-bind:style="styles">位置</td>
				</tr>
				<tr v-for="item in items">
					<td v-bind:style="styles">{{new
						Date(item.times).toLocaleString()}}</td>
					<td v-text="item.longitude" v-bind:style="styles"></td>
					<td v-text="item.latitude" v-bind:style="styles"></td>
					<td v-text="item.adds" v-bind:style="styles"></td>
				</tr>
			</table>
			
		</div>
	</div>
	<input type="button" id="run" value="开始" onclick="cs()" />
	<!-- 路书停止按钮 -->
	<input type="button" id="stop" value="停止 " onclick="cs1()" />
	<!-- 路书暂停按钮 -->
	<input type="button" id="pause" value="暂停" onclick="cs2()" />
	<!--添加范围坐标 -->
	<input type="button" id="pase" value="添加范围" onclick="cs3()" />
	<!--添加坐标 -->
	<input type="button" id="pase1" value="模拟定位" onclick="cs4()" />
	<!-- 地图测距开始按钮 -->
	<input type="button" value="开启测距" onclick="myDis.open();" />
	<!-- 地图测距关闭按钮  -->
	<input type="button" value="关闭测距" onclick="myDis.close()" />
<!-- 	<input type="text" id="tt" value="郑州">
	<table border="2px" id="cont1">
				<tr>
					<td v-bind:style="styles">星期</td>
					<td v-bind:style="styles">天气</td>
					<td v-bind:style="styles">风力</td>
					<td v-bind:style="styles">温度</td>
				</tr>
				<tr v-for="item in tst">
					<td v-bind:style="styles">{{item.date}}</td>
					<td v-text="item.weather" v-bind:style="styles"></td>
					<td v-text="item.wind" v-bind:style="styles"></td>
					<td v-text="item.temperature" v-bind:style="styles"></td>
				</tr>
			</table> -->
	<div data-options="region:'east',iconCls:'icon-reload',split:true"
		style="position: absolute; top: 0px; left: 1487px; width: 232px; height: 800px; border: 5px; bacrground-color: #FAF8AB">
		<div>
			<table class="easyui-datagrid" title="司法部门信息"
				style="width: 232px; height: 15px">
			</table>
			<div style="width: 220px; height: 255px; overflow: auto;">
				<ul id="jub" class="ztree" style="width: 220px; height: 355px;"></ul>
			</div>
		</div>
		<table id="tt"></table>
		<div style="width: 220px; height: 255px; overflow: auto;">
			<table border="2px" id="vm">
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>电话</td>
					<td>状态</td>
				</tr>
				<tr v-for="item in result">
					<td><input type="checkbox" name="checkbox-id"></td>
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-html="item.phonenum"></td>
					<td v-text="item.state"></td>
				</tr>
			</table>
		</div>
		<div style="width: 232px; height: 255px">
			<table class="easyui-datagrid" title="查询"
				style="width: 232px; height: 10px">
			</table>
			<div style="width: 232px; height: 115px; background-color: pink">
				起始： <input id="d12" type="text" /> <img
					onclick="WdatePicker({el:'d12'})"
					src="/map/My97DatePicker/skin/datePicker.gif" width="13"
					height="22" align="absmiddle"> 截至： <input id="d13"
					type="text" /> <img onclick="WdatePicker({el:'d13'})"
					src="/map/My97DatePicker/skin/datePicker.gif" width="13"
					height="22" align="absmiddle"> <input type="button"
					onclick="psp()" value="查看轨迹"
					style="width: 232px; background-color: #1BAEE2">
				<div id="code"></div>
			</div>

		</div>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el : '#vm',
		data : {
			result : []
		}
	});
	var vm1 = new Vue({
		el : '#cont',

		data : {
			styles : {
				color : 'blue',
				fontSize : '14px',
				width : "300px"
			},
			tst:[],
			items : []
		}
	});
	//获取ztree字节点的值
	function zTreeOnClick(treeId, treeNode, clickFlag) {
		$.ajax({
			url : '../usermap/loca',
			data : {
				id : clickFlag.id
			},
			success : function(res) {
				vm.result = res.data;
			}
		});
	}
	var zNodes = [];
	var setting = {
		view : {
			showLine : false
		},
		callback : {
			onClick : zTreeOnClick
		//定义回调函数
		},
		data : {
			simpleData : {
				enable : true
			}
		}
	}

	var getDepts = function() {
		$.ajax({
			url : "/usermap/judic",
			success : function(result) {
				zNodes = result.data;
				$.fn.zTree.init($("#jub"), setting, zNodes);
			}
		});
	}
	$(document).ready(function() {
		getDepts();
		
	});
	

	function toUtf8(str) {
		var out, i, len, c;
		out = "";
		len = str.length;
		for (i = 0; i < len; i++) {
			c = str.charCodeAt(i);
			if ((c >= 0x0001) && (c <= 0x007F)) {
				out += str.charAt(i);
			} else if (c > 0x07FF) {
				out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
				out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			} else {
				out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			}
		}
		return out;
	}
	
	$("#code").qrcode({
		render : "table", //table方式 
		width : 232, //宽度 
		height : 140, //高度 
		text : "120.77.85.66:8080" //任意内容 
	});
</script>
<script type="text/javascript">
	var map = new BMap.Map("container"); // 创建地图实例  
	var longitude = "113.549805";//经度  
	var latitude = "34.808465";//纬度  
	var point = new BMap.Point(longitude, latitude); // 创建点坐标  

	map.centerAndZoom(point, 15);//初始化地图，设置中心点坐标和地图别
	map.addControl(new BMap.NavigationControl()); //添加平移缩放控件  		
	map.addControl(new BMap.MapTypeControl());//添加卫星视图
	map.addControl(new BMap.CopyrightControl());//添加版本号
	map.addControl(new BMap.ScaleControl());//添加放大、缩小控件  
	map.enableScrollWheelZoom();//允许鼠标滑轮操作  
	$('#tt').datagrid({
		title : '人员信息',
		/* url : "/usermap/loca&id=3", */
		width : 232,
		height : 15,
		fitColumns : true,
		nowrap : false,
		columns : [ [

		] ],
	});
	//模拟定位
	function cs4() {
		map.addEventListener("click", function(e) {
			map.clearOverlays();
			console.log(e.point.lng + "." + e.point.lat);
			var point1 = new BMap.Point(e.point.lng, e.point.lat);//点击时创建一个坐标
			var marker = new BMap.Marker(point1);//创建一个坐标点
			map.addOverlay(marker);//把坐标添加到地图
			//获取副选框对应的值
			var $check = $("table").find(":checkbox").filter(":checked");
			// 找到选中的复选框所在的行  
			var $tr = $check.eq(0).parent().parent();
			// 找到此行中的某个td   
			var $td = $tr.find("td").eq(1).text();
			if ($td == "") {
				alert("请选择人员后在操作..");
			}
			$.ajax({
				url : "/usermap/adduser",
				data : {
					id : $td,
					lng : e.point.lng,
					lat : e.point.lat
				},
				success : function(result) {
					var x = result.code;
					if (x == "0") {
						alert("模拟定位添加成功");
					}
				}
			});

		});
	}
	//路书
	var arr = [];
	var lushu;
	var datas;
	function psp() {
		var $check = $("table").find(":checkbox").filter(":checked");
		// 找到选中的复选框所在的行  
		var $tr = $check.eq(0).parent().parent();
		// 找到此行中的某个td   
		var $td = $tr.find("td").eq(1).text();
		if ($td == "") {
			alert("请选择人员后在操作..");
		}
		var data1 = $("#d12").val();
		var data2 = $("#d13").val();
		$
				.ajax({
					url : "/usermap/getuser",
					data : {
						id : $td,
						data1 : data1,
						data2 : data2
					},
					success : function(result) {
						datas = result.data;
						for (var i = 0; i < datas.length; i++) {
							var point = new BMap.Point(datas[i].longitude,
									datas[i].latitude); // 创建点坐标  
							arr.push(point);
							/* var marker = new BMap.Marker(point);//创建一个坐标点
							 map.addOverlay(marker);//把坐标添加到地		
							 */}
						var polyline = new BMap.Polyline(arr); //创建折线
						map.clearOverlays();
						map.addOverlay(polyline); //在地图上绘制线					 
						vm1.items = datas;
						lushu = new BMapLib.LuShu(
								map,
								arr,
								{
									defaultContent : "小样,来抓我呀",//标题
									autoView : true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
									icon : new BMap.Icon(
											"http://developer.baidu.com/map/jsdemo/img/Mario.png",
											new BMap.Size(32, 70), { //超级马里图片
												offset : new BMap.Size(0, -5), //相当于CSS精灵
												imageOffset : new BMap.Size(0,
														0)
											//图片的偏移量。为了是图片底部中心对准坐标点。
											}),/* BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23,25),{anchor : new BMap.Size(10, 25)}), */
									speed : 800,//设置移动速度，值越小越慢
									enableRotation : true,//是否设置marker随着道路的走向进行旋转
									landmarkPois : [
									//里面填写之间相应的点坐标
									]

								});
					}
				});

	}

	//鼠标绘制完成回调方法   获取各个点的经纬度

	var overlays = [];//定义一个缓冲数组，
	//var lushu;//定义路书函数
	var path;
	var overlaycomplete = function(e) {
		overlays.push(e.overlay);//把得到的点坐标添加到数组
		path = e.overlay.getPath();//Array<Point> 返回多边型的点数组			  
	}
	//添加范围
	function cs3() {
		var $check = $("table").find(":checkbox").filter(":checked");
		// 找到选中的复选框所在的行  
		var $tr = $check.eq(0).parent().parent();
		// 找到此行中的某个td   
		var $td = $tr.find("td").eq(1).text();
		if ($td == "") {
			alert("请选择人员后在操作..");
		}
		for (var i = 0; i < path.length; i++) {
			$.ajax({
				url : "/usermap/puts",
				data : {
					id : $td,
					lng : path[i].lng,
					lat : path[i].lat
				},
				success : function(result) {
					var x = result.code;
					if (x == "0") {
						alert("范围添加成功");
					}
				}

			});
		}
	}

	var styleOptions = {
		strokeColor : "red", //边线颜色。
		fillColor : "pink", //填充颜色。当参数为空时，圆形将没有填充效果。
		strokeWeight : 3, //边线的宽度，以像素为单位。
		strokeOpacity : 0.8, //边线透明度，取值范围0 - 1。
		fillOpacity : 0.6, //填充的透明度，取值范围0 - 1。
		strokeStyle : 'solid' //边线的样式，solid或dashed。
	}

	//实例化鼠标绘制工具
	var drawingManager = new BMapLib.DrawingManager(map, {
		isOpen : false, //是否开启绘制模式
		enableDrawingTool : true, //是否显示工具栏
		drawingMode : BMAP_DRAWING_POLYGON,//绘制模式  多边形
		drawingToolOptions : {
			anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //位置
			offset : new BMap.Size(5, 5), //偏离值
			drawingModes : [// BMAP_DRAWING_MARKER,// 画点 
			//BMAP_DRAWING_CIRCLE,//画圆 
			//BMAP_DRAWING_POLYLINE,//画线 
			BMAP_DRAWING_POLYGON,//画多边形 
			//BMAP_DRAWING_RECTANGLE //画矩形
			]
		},
		polygonOptions : styleOptions
	//多边形的样式
	});
	//测距
	var myDis = new BMapLib.DistanceTool(map);
	//添加鼠标绘制工具监听事件，用于获取绘制结果
	drawingManager.addEventListener('overlaycomplete', overlaycomplete);
	function clearAll() {
		for (var i = 0; i < overlays.length; i++) {
			map.removeOverlay(overlays[i]);
		}
		overlays.length = 0
	}
	function cs() {

		lushu.start();
	}
	function cs1() {

		lushu.stop();
	}
	function cs2() {

		lushu.pause();
	}
</script>

</html>